<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入头尾部样式 -->
    <link rel="stylesheet" href="./css/head.css">
    <link rel="stylesheet" href="./css/footer.css">
    <!-- 引入登入样式 -->
    <link rel="stylesheet" href="./css/sign_in.css">

    <!-- 引入js库文件 -->
    <script src="./lib/jquery.min.js"></script>
    <script src="./js/sign_in.js"></script>


</head>

<body>
    <!-- 头部顶部区域 -->
    <div class="head-top">
        <div class="wrapper clearfix">
            <p class="fl">乐购www.legou.com</p>
            <p class="fr">欢迎光临乐购 请 <a href="#">登入|</a> <a href="#">注册</a></p>
        </div>
    </div>
    <!-- 头部顶部区域结束 -->

    <!-- 头部logo搜索导航栏区域 -->
    <div class="head-logo wrapper clearfix">
        <!-- logo区域 -->
        <div class="logo fl">
            <h1><a href="index.html"></a></h1>
        </div>
        <!-- 右边区域 -->
        <div class="logo-right fr">
            <img src="./imgs/dainhua.png" alt="">
            <div>
                <p>
                    咨询电话
                </p>
                <p>XXXX-XXXXXXXXX</p>
            </div>
        </div>
    </div>
    <!-- 头部logo搜索导航栏区域结束 -->

    <!-- 注册区域 -->
    <div class="content1">
        <div class="wrapper">

            <div class="box">
                <span class="yellowline"></span>
                <!-- 注册进度栏 -->
                <ul>
                    <li class="sildeli"><span class="sildelispan">1</span>设置用户名</li>
                    <li><span>2</span>请填写账号信息</li>
                    <li><span>3</span>注册成功</li>
                </ul>

                <div class="bigbox">
                    <div class="smallBox">
                        <!-- 注册协议盒子 -->
                        <div class="protocol">
                            <h4>注册协议</h4>
                            <p>【审慎阅读】
                                <span>您在申请注册流程中点击同意前，应当认真阅读以下协议。</span>
                                <em>请您务必审慎阅读、充分理解协议中相关条款内容，其中包括</em>
                            </p>
                            <ol>
                                <li>1、与您约定免除或限制责任的条款；</li>
                                <li>2、与您约定免除或限制责任的条款；</li>
                                <li>3、与您约定免除或限制责任的条款；</li>
                            </ol>
                            <p>如您对协议有任何疑问，可向平台客服咨询。</p>
                            <p><span>【特别提示】</span>
                                当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。如您因平台服务与淘宝发生争议的，适用《淘宝平台服务协议》处理。如您在使用平台服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。
                            </p>
                            <p>阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序</p>
                            <a>平台服务协议</a> <br>
                            <a>隐私权政策</a> <br>
                            <a>法律声明</a> <br>
                            <a>支付宝及客户端服务协议</a>
                            <button disabled>同意协议</button>
                        </div>
                        <!-- 表单验证盒子 -->
                        <div class="verify">
                            <div class="zuojiantou"></div>
                            <form action="#"  method="GET">
                                <label>真实姓名: <input type="text" placeholder="请输入真实姓名" name="xm"><span></span></label>
                                <label>&emsp;用户名: <input type="text" placeholder="请输入您的账户名" name="yhm"><span></span></label>
                                <label>&emsp;&emsp;密码: <input type="password" placeholder="请输入您的密码" name="mm"><span></span></label>
                                <label>确认密码: <input type="password" placeholder="请再次输入密码"><span></span></label>
                                <p id="strength">密码强度: <span><i></i></span></p>
                                <label>&emsp;&emsp;邮箱: <input type="text" class="emil" placeholder="请输入邮箱" > @&emsp;
                                    <select>
                                        <option value="163.com">163.com</option>
                                        <option value="qq.com">qq.com</option>
                                        <option value="gmali.com">gmali.com</option>
                                    </select>
                                    <span></span></label>
                                <label>手机号码: <input type="text" placeholder="请输入手机号码" name="sjh"> <span></span></label>
                                <label>&emsp;验证码: <input type="text" placeholder="请注意查收" class="yzm"><button
                                        type="button" id="btn">获取验证码</button> <span></span></label>
                                <button type="button" id="smt">提交注册</button>
                            </form>
                            <div id="popUp">错误</div>
                        </div>
                        <!-- 注册成功盒子 -->
                        <div class="sign-in-win">
                            <div class="zuojiantou"></div>
                            <img src="./imgs/win.png" alt="">
                            <p>注册完成  自动跳转登入页面</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <!-- 页脚区域 -->
    <div class="footer">
        <div class="wrapper">
            <div class="footer-top">
                <ul>
                    <li>
                        <img src="./imgs/CgQI0lWskgmADBnsAAAPZvcSh3E68900~1.jpg" alt="">
                        <div>
                            <h4>正品保障</h4>
                            <p>收货时间由你做主</p>
                        </div>
                    </li>
                    <li>
                        <img src="./imgs/CgQIz1WslI-Adao3AAAN5b_ut2I80100~1.jpg" alt="">
                        <div>
                            <h4>正品保障</h4>
                            <p>收货时间由你做主</p>
                        </div>
                    </li>
                    <li>
                        <img src="./imgs/ChEbulWsk4iADa_aAAAM544hHN818600~1.jpg" alt="">
                        <div>
                            <h4>正品保障</h4>
                            <p>收货时间由你做主</p>
                        </div>
                    </li>
                    <li>
                        <img src="./imgs/ChEi11WsyiyALBbiAAAN9lEEK5M33200~1.jpg" alt="">
                        <div>
                            <h4>正品保障</h4>
                            <p>收货时间由你做主</p>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="footer-center clearfix">
                <dl>
                    <dt>新手入门</dt>
                    <dd>购物流程</dd>
                    <dd>购物流程</dd>
                    <dd>购物流程</dd>
                    <dd>服务协议及隐私说明</dd>
                    <dd>购物流程</dd>
                </dl>
                <dl>
                    <dt>新手入门</dt>
                    <dd>购物流程</dd>
                    <dd>购物流程</dd>
                    <dd>购物流程</dd>
                    <dd>礼品卡支付</dd>
                    <dd>购物流程</dd>
                </dl>
                <dl>
                    <dt>新手入门</dt>
                    <dd>购物流程</dd>
                    <dd>商品验货与签收</dd>
                </dl>
                <dl>
                    <dt>新手入门</dt>
                    <dd>购物流程</dd>
                    <dd>退换货政策</dd>
                </dl>

                <div class="qr-img fl">
                    <ul class="fl">
                        <li>
                            <p>App更优惠</p>
                            <img src="./imgs/qryhd.png" alt="">
                        </li>
                        <li>
                            <p>加微信查订单</p>
                            <img src="./imgs/qryhd.png" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-buttom">
            <div class="wrapper">
                <p>沪ICP备XXXXXXXXX号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：XXX-XXXXXXXX | 沪B2-XXXXXXX |
                </p>
                <p>沪公网安备 XXXXXXXXX号 | 友情链接 | 出版物经营许可证 | 增值电信业务经营许可证</p>
                <ul>
                    <li><img src="./imgs/footer1.png" alt=""></li>
                    <li><img src="./imgs/footer1.png" alt=""></li>
                    <li><img src="./imgs/footer1.png" alt=""></li>
                    <li><img src="./imgs/footer1.png" alt=""></li>
                    <li><img src="./imgs/footer2.jpg" alt=""></li>
                </ul>
            </div>

        </div>
    </div>

</body>

</html>